import React, { Component } from 'react';
import { render } from 'react-dom';
import './howToDo.css';

 class HowToDo extends Component{
    constructor(props){
        super(props);
        this.state={
            htdList:[
                {id:1,desc:'关注基因团公众账号'},
                {id:2,desc:'向客服获取邀请码，注册成为我们的健康管家'},
                {id:3,desc:'新建客户信息，获取推荐产品列表'},
                {id:4,desc:'借助平台素材完成客户教育和自我培训'},
                {id:5,desc:'达成服务，获取客户健康管理费'},
            ]
        }
    }
    _renderHtdList(item){
        return(
            <li key={item.id} className="htdItem dfr aib">
                <span className="htdItemId">{item.id}</span>
                <span className="htdItemDesc">{item.desc}</span>
            </li>
        )
    }
    render(){
        return(
            <div className="htdWrapper dfr aic jssa">
                <div className=""><img className="htdImg" src={require('../../image/howtodo1.jpg')}/></div>
                {/*<img className="htdImg" src={require('../../image/howtodo1.jpg')}/>*/}
                <div className="htdContent">
                    <div className="htdTitle">如何使用基因团<br/>内容步骤>></div>
                    <ul className="htdUl">
                        {this.state.htdList.map((item) => this._renderHtdList(item))}
                    </ul>
                    <div className="getMore">了解更多></div>                
                </div>
            </div>
        )
    }
}
export default HowToDo